<template>
	<view class="serveListView">
		<nav-bar isBack title="在线咨询"></nav-bar>
		<view class="user-box" :class="{'onmsg':noread[item.user_im_account]}" v-for="item in userListData.list" @tap="userTap(item)">
			<view class="head">
				<image v-if="item.userInfo && item.userInfo.headimg && item.userInfo.headimg.path" :src="item.userInfo.headimg.path">
				<image v-else src="@/static/common/avator.png">
			</view>
			<view class="info">
				<view class="row-1">
					<text class="name">{{item.userInfo.nickname || '未设置'}}</text>
					<text class="time">{{getYMDHMS(item.last_time*1000)}}</text>
				</view>
				<!-- <view class="row-2">{{getLastMsgTxt(item)}}</view> -->
				<view class="row-2">{{item.shopinfo.shopname}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from "@/components/navBar/navBar"
	import customeApi from '@/service/custome.js'
	export default{
		components:{
			navBar
		},
		data(){
			return{
				userListData:{
					loading:false,
					list:[],
					page:0,
					pagesize:1000,
					noread:{}
				},
				timData: {
					status: false,
					userID: '',
					userSig: '',
					to: ''
				},
			}
		},
		computed:{
			timMsg(){
				return this.$store.state.tim.msg
			},
			noread(){
				return this.$store.state.tim.noread
			}
		},
		onLoad(){
			// this.getCustomeAccount();
		},
		methods:{
			getCustomeAccount(){
				customeApi.getAccount().then(res=>{
					if(res.code === 1){
						this.timData.userID = res.data.im_user;
						this.timData.userSig = res.data.sig;
						this.getChatList();
					}else{
						this.$utils.showErr({title: res.data.msg})
					}
				})
			},
			
			getChatList(){
				this.userListData.page = this.userListData.page+1
				customeApi.getChatList({page:1,pagesize:this.userListData.pagesize}).then(res=>{
					if(res.code === 1){
						// this.initUserListNoread();
						this.userListData.list = res.data.list;
					}else{
						this.$utils.showErr({title: res.data.msg})
					}
				})
			},
			getYMDHMS (timestamp) {
			  let time = new Date(timestamp)
			  let year = time.getFullYear()
			  const month = (time.getMonth() + 1).toString().padStart(2, '0')
			  const date = (time.getDate()).toString().padStart(2, '0')
			  const hours = (time.getHours()).toString().padStart(2, '0')
			  const minute = (time.getMinutes()).toString().padStart(2, '0')
			  const second = (time.getSeconds()).toString().padStart(2, '0')
		
			  // return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
			  return hours + ':' + minute + ':' + second
			},
			getLastMsgTxt(item){
				if(!item || !item.lastMsg || !item.lastMsg.msg_content){
					return ""
				}
				let msg_content = JSON.parse(item.lastMsg.msg_content);
				if(!msg_content){
					return ""
				}
				let Desc = JSON.parse(msg_content.Desc);
				if(!Desc){
					return ""
				}
				let format = Desc.format;
				if(!format){
					return ""
				}
				if(format == 'string'){
					return msg_content.Data || ""
				}
				return '系统消息'
			},
			userTap(item){
				this.removeUserListNoread(item.user_im_account);
				let url = `/pages_customer/pages/index?to=${item.user_im_account}&chat_id=${item.id}`;
				if(uni.getStorageSync('role')){
					url  += `&partner_type=${uni.getStorageSync('role')}`
				}
				uni.navigateTo({
					url
				})
			},
			updateUserListInfo(message) {
			  let res_i = this.userListData.list.findIndex(r => r.user_im_account == message.from);
			  if (res_i === -1) {
			    this.getChatList();
			    return
			  }
			  let cur_user = this.userListData.list[res_i];
			  this.setUserListNoread(cur_user.user_im_account, 1);
			  let newLastMsg = cur_user.lastMsg;
			  newLastMsg.from_account = message.from;
			  newLastMsg.msg_timestamp = message.time;
			  newLastMsg.msg_type = message.type;
			  newLastMsg.to = message.to;
			  if (message.type == 'TIMImageElem' || message.type == 'TIMCustomElem' && message._elements[0].type == 'TIMImageElem') {
			    let temp = JSON.parse(newLastMsg.msg_content);
			    temp.Desc = message.payload.description;
			    temp.Data = '图片消息';
			    temp.Ext = message.extension;
			    newLastMsg.msg_content = JSON.stringify(temp)
			  }
			  if (message.type == 'TIMCustomElem') {
			    let temp = JSON.parse(newLastMsg.msg_content);
			    temp.Desc = message.payload.description;
			    temp.Data = message.payload.data;
			    temp.Ext = message.extension;
			    newLastMsg.msg_content = JSON.stringify(temp)
			  }
			  this.$set(this.userListData.list[res_i], 'lastMsg', newLastMsg)
			  this.$set(this.userListData.list[res_i], 'last_time', message.time)
			},
			//设置未读
			setUserListNoread(user_im_account, value) {
			  this.$set(this.userListData.noread, user_im_account, value);
			  uni.setStorageSync('userListNoread', this.userListData.noread);
			},
			removeUserListNoread(user_im_account){
				let userListNoread = uni.getStorageSync('userListNoread');
				if(userListNoread && userListNoread[user_im_account]){
					delete userListNoread[user_im_account];
					this.$set(this.userListData, "noread", userListNoread);
					uni.setStorageSync('userListNoread', userListNoread);
				}
				this.$store.commit('tim/SET_timNoread', {
					account:user_im_account,
					value:0
				})
			},
			initUserListNoread() {
			  let userListNoread = uni.getStorageSync('userListNoread');
			  this.userListData.noread = userListNoread ? userListNoread : {};
			}
		},
		watch: {
			timMsg(newVal,oldVal){
				if(newVal){
					this.updateUserListInfo(newVal);
					// let rei = this.userListData.list.findIndex(r=>r.user_im_account == newVal.from);
					// if(rei === -1){
					// 	this.getChatList()
					// }else{
					// 	this.$set(this.userListData.list[rei],last_time,newVal.time)
					// }
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
	}
	
	.serveListView {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #F8F8F8;
		.user-box {
			display: flex;
			padding: 20rpx;
			align-items: center;
			cursor: pointer;
			background: #fff;
			margin-bottom: 20rpx;
		
			.head {
				width: 120rpx;
				height: 120rpx;
				position: relative;
				margin-right: 20rpx;
		
				image {
					width: 100%;
					height: 100%;
					border-radius: 1000px;
				}
			}
		
			.info {
				flex: 1;
		
				.row-1 {
					margin-bottom: 10rpx;
		
					.name {
						font-size: 30rpx;
						color: #333;
					}
		
					.time {
						float: right;
					}
				}
		
				.row-2 {
					color: #939393;
					font-size: 26rpx;
				}
			}
		
			&.onmsg .head::before {
				content: ' ';
				display: block;
				width: 10px;
				height: 10px;
				background-color: red;
				border: 2px solid #fff;
				position: absolute;
				top: 0;
				right: 0;
				border-radius: 10px;
				z-index: 10;
			}
		
			&.active,
			&:hover {
				background-color: #fff;
			}
		}
	}
</style>